import 'package:flutter/material.dart';
import 'dart:math' as math;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Text("标题"),
        //更换标题的图标
        leading: Builder(builder: (context) {
          return IconButton(
              icon: Icon(Icons.dashboard, color: Colors.white),
              onPressed: () {
                Scaffold.of(context).openDrawer();
              });
        }),
        actions: <Widget>[
          //如果我们要自定义loading按钮的大小，就必须通过UnconstrainedBox来“去除”父元素的限制,如果不用UnconstrainedBox，加载框是椭圆的
          UnconstrainedBox(
            child: SizedBox(
                width: 20,
                height: 20,
                child: CircularProgressIndicator(
                    strokeWidth: 3,
                    valueColor: AlwaysStoppedAnimation(Colors.white70))),
          )
        ],
      ),
      //body: PaddingTestRoute(),
      //body: ConstrainTestRoute(),
      //body:SizedBoxTestRoute()
//body:ConstrainTestRoute2()
      //body: UnconstrainTestRoute(),
      //body: DecoratedBoxTestRoute(),
      //body: TransformTestRoute(),
      //body: ContainerTestRoute(),
      //body: ScaffoldRoute(),
body: ClipTestState(),
    ));
  }
}

class ScaffoldRoute extends StatefulWidget {
  @override
  _ScaffoldRouteState createState() => _ScaffoldRouteState();
}

class MyDrawer extends StatelessWidget {
  const MyDrawer({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Drawer(
        child: MediaQuery.removePadding(
            context: context,
            removeTop: true, //移除抽屉菜单顶部默认的留白
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.only(top: 38.0),
                  child: Row(children: <Widget>[
                    Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 16.0),
                        child: ClipOval(
                          child: Image.asset("imgs/avatar.png", width: 80),
                        )),
                    Text("Wendux",
                        style: TextStyle(fontWeight: FontWeight.bold))
                  ]),
                ),
                Expanded(
                    child: ListView(children: <Widget>[
                  ListTile(
                      leading: const Icon(Icons.add),
                      title: const Text("Add account")),
                  ListTile(
                      leading: const Icon(Icons.settings),
                      title: const Text("Manage accounts"))
                ]))
              ],
            )));
  }
}

class ClipTestState extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    
    Widget avatar = Image.asset("imgs/avatar.png", width: 60.0);

    return Center(
      child: Column(
        children: <Widget>[
        avatar,//不剪裁
        ClipOval(child: avatar),//剪裁为圆形
        ClipRRect(//剪裁为圆角矩形
          borderRadius: BorderRadius.circular(5.0), child: avatar),
        Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
          Align(
              alignment: Alignment.topLeft,
              widthFactor: .5, //宽度为原来宽度的一半，另一半会溢出
              child: avatar),
          Text("你好世界", style: TextStyle(color: Colors.green))
        ]),
        Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
          ClipRect(//将溢出部分裁减掉
            child: Align(
                alignment: Alignment.topLeft,
                widthFactor: .5, //宽度为原来宽度的一半，另一半会溢出
                child: avatar),
          ),
          Text("你好世界", style: TextStyle(color: Colors.green))
        ])
      ]),
    );
  }
}

class _ScaffoldRouteState extends State<ScaffoldRoute> {
  int _selectedIndex = 1;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: <Widget>[
          IconButton(icon: Icon(Icons.share), onPressed: () {})
        ],
        title: Text("App Name"),
      ),
      drawer: new MyDrawer(),
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
          BottomNavigationBarItem(
              icon: Icon(Icons.business), title: Text('business')),
          BottomNavigationBarItem(
              icon: Icon(Icons.home), title: Text('School')),
        ],
        currentIndex: _selectedIndex,
        fixedColor: Colors.blue,
        onTap: _onItemTapped,
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: _onAdd,
      ),
    );
  }

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  void _onAdd() {}
}

class ContainerTestRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top: 50.0, left: 120.0),
      constraints: BoxConstraints.tightFor(width: 200.0, height: 150.0),
      decoration: BoxDecoration(
          gradient: RadialGradient(
            colors: [Colors.red, Colors.orange],
            center: Alignment.topLeft,
            radius: .98,
          ), //背景渐变
          borderRadius: BorderRadius.circular(3.0), //3像素圆角

          boxShadow: [
            BoxShadow(
                color: Colors.black54,
                offset: Offset(2.0, 2.0),
                blurRadius: 4.0)
          ]),
      //color: Colors.black,
      transform: Matrix4.rotationZ(.2),
      alignment: Alignment.center,
      child: Text(
        "5.20",
        style: TextStyle(color: Colors.white, fontSize: 40.0),
      ),
    );
  }
}

class TransformTestRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.black,
      child: new Transform(
        transform: new Matrix4.skewY(0.3), //沿Y轴倾斜0.3弧度
        alignment: Alignment.topRight, //相对于坐标系原点的对齐方式
        child: new Container(
            padding: const EdgeInsets.all(8.0),
            color: Colors.deepOrange,
            child: const Text("Apartment for rent!")),
      ),
    );
  }
}

class DecoratedBoxTestRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      decoration: BoxDecoration(
          gradient:
              LinearGradient(colors: [Colors.red, Colors.orange[700]]), //背景渐变
          borderRadius: BorderRadius.circular(3.0), //3像素圆角
          boxShadow: [
            BoxShadow(
                color: Colors.black54,
                offset: Offset(2.0, 2.0),
                blurRadius: 4.0)
          ]),
      // child: Padding(
      //   padding: EdgeInsets.symmetric(horizontal: 80.0, vertical: 18.0),
      //   child: Text(
      //     "Login",
      //     style: TextStyle(color: Colors.white),
      //   ),
      // ),
//平移
      // child: Transform.translate(
      //   offset: Offset(-20.0, -5.0),
      //   child: Text("Hello World"),
      // ),
//旋转
      // child: Transform.rotate(
      //   angle: math.pi/2,
      //   child: Text("Hello World"),
      // ),

      //缩放
      child: Transform.scale(
        scale: 1.5, //放大到1.5倍
        child: Text("Hello World"),
      ),
    );
  }
}

class UnconstrainTestRoute extends StatelessWidget {
//定义一个redBox，它是一个背景颜色为红色的盒子，暂时不指定它的宽度和高度
  Widget redBox = DecoratedBox(decoration: BoxDecoration(color: Colors.red));
  @override
  Widget build(BuildContext context) {
    //最小高度为50，宽度尽可能大的红色容器
    return ConstrainedBox(
      constraints: BoxConstraints(
          minHeight: 50.0, //最小高度为50像素
          minWidth: double.infinity //宽度尽可能大
          ),
      child: UnconstrainedBox(
          child: ConstrainedBox(
              constraints: BoxConstraints(minWidth: 90.0, minHeight: 20.0),
              child: redBox)),
    );
  }
}

class SizedBoxTestRoute extends StatelessWidget {
//定义一个redBox，它是一个背景颜色为红色的盒子，暂时不指定它的宽度和高度
  Widget redBox = DecoratedBox(decoration: BoxDecoration(color: Colors.red));
  @override
  Widget build(BuildContext context) {
    //最小高度为50，宽度尽可能大的红色容器
    return SizedBox(
      width: 80.0,
      height: 80.0,
      child: redBox,
    );
  }
}

class ConstrainTestRoute extends StatelessWidget {
//定义一个redBox，它是一个背景颜色为红色的盒子，暂时不指定它的宽度和高度
  Widget redBox = DecoratedBox(decoration: BoxDecoration(color: Colors.red));
  @override
  Widget build(BuildContext context) {
    //最小高度为50，宽度尽可能大的红色容器
    return ConstrainedBox(
      constraints: BoxConstraints(
          minHeight: 50.0, //最小高度为50像素
          minWidth: double.infinity //宽度尽可能大
          ),
      //虽然将Container的高度设置为5像素，但是最终却可以变为50像素，这是因为ConstrainedBox的最小高度限制生效了。
      //如果将Container的高度设置为80像素，那么最终红色区域的高度也会是80像素，因为在该示例中，ConstrainedBox只限制了最小高度，并未限制最大高度
      child: Container(height: 5.0, child: redBox),
    );
  }
}

//通过这个示例可以发现，有多重限制时，对于minWidth和minHeight来说，所取得是父子中相应数值较大的值，实际上，只有这样才能保证父限制与子限制不冲突
class ConstrainTestRoute2 extends StatelessWidget {
//定义一个redBox，它是一个背景颜色为红色的盒子，暂时不指定它的宽度和高度
  Widget redBox = DecoratedBox(decoration: BoxDecoration(color: Colors.red));
  @override
  Widget build(BuildContext context) {
    return ConstrainedBox(
      //父
      constraints: BoxConstraints(minHeight: 60.0, minWidth: 60.0),

      //子
      child: ConstrainedBox(
        constraints: BoxConstraints(minWidth: 90.0, minHeight: 20.0),
        child: redBox,
      ),
    );
  }
}

class PaddingTestRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //上下左右各添加16像素的补白
    return Padding(
      padding: EdgeInsets.all(16.0),
      child: Column(
          //显示指定对齐方式为左对齐，排除对其干扰
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Padding(
              //左边添加8像素补白
              padding: const EdgeInsets.only(left: 8.0),
              child: Text("Hello World"),
            ),
            Padding(
              //上下各添加8像素补白
              padding: const EdgeInsets.symmetric(vertical: 8.0),
              child: Text("Hello World"),
            ),
            Padding(
              //分别指定4个方向的补白
              padding: const EdgeInsets.fromLTRB(20.0, .0, 20.0, 20.0),
              child: Text("Hello World"),
            )
          ]),
    );
  }
}
